
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用vuejs</title>
    <script src="./../js/vue.js"></script>

    <!--    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/vue-i18n/8.3.0/vue-i18n.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/spark-md5/3.0.0/spark-md5.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>-->
<!--    <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>-->

    <!--element ui-->

<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

<!--    <link rel="stylesheet" href="./../plugins/element/index.css">-->
<!--    <script src="./../plugins/element/index.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.9.2/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.9.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <div @click="handleMethod" v-if="false" >
        点击xxxx
    </div>
    <div @click="handleMethod">
        点击
    </div>
    <el-button type="primary" plain  @click="testClick">主要按钮</el-button>
    <el-button type="text" @click="dialogVisible=true">点击打开 Dialog</el-button>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         </span>
    </el-dialog>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#container',
        data: {
            dialogVisible:false,
            name:'xuzongmeng',
            number:10
        },
        methods: {
            testMethod: function () {
                window.alert("testMethodx" + this.dialogVisible)
            },
            testClick: function () {
                console.log("testClick==" + vm.dialogVisible)
                console.log("namxe==" + vm.name)
                console.log("number==" + this.number)
                let s = vm.formatMoney(400300);
                console.log("number1111==" + s)
            },
            handleMethod: function () {
                window.alert("handleMethod")
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            formatMoney(value) {
                const newValue = ['', '', '']
                let fr = 1000
                let num = 3
                let text1 = ''
                let fm = 1
                while (value / fr >= 1) {
                    fr *= 10
                    num += 1
                    // console.log('数字', value / fr, 'num:', num)
                }
                if (num <= 4) { // 千
                    newValue[0] = parseInt(value / 1000) + ''
                    newValue[1] = '千'
                } else if (num <= 8) { // 万
                    text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = text1 === '万' ? 10000 : 10000000
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = parseFloat(value / fm).toFixed(2) + ''
                    }
                    newValue[1] = text1
                } else if (num <= 16) { // 亿
                    text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
                    text1 = (num - 8) / 4 > 1 ? '万亿' : text1
                    text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = 1
                    if (text1 === '亿') {
                        fm = 100000000
                    } else if (text1 === '千亿') {
                        fm = 100000000000
                    } else if (text1 === '万亿') {
                        fm = 1000000000000
                    } else if (text1 === '千万亿') {
                        fm = 1000000000000000
                    }
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = parseFloat(value / fm).toFixed(2) + ''
                    }
                    newValue[1] = text1
                }
                if (value < 1000) {
                    newValue[0] = value + ''
                    newValue[1] = ''
                }
                return newValue.join('')
            },

        },
        created: function () {
            console.log('created')
            // this.testMethod()
        },
        updated: function () {
            console.log('updated')
        }
    });
</script>
</html>
